<template>
	<view class='group-box'>
		<view class='group-imagebox' v-if='foods.length % 2 == 1'>
			<view class='group-item' v-for="(food, foodIndex) in foods" :key="foodIndex">
				<view class='image-wrapepr' :style="{height : setting.defaultSwiperHeight * 0.9 + 'px'}">
					<image :src='food.cover' class='group-image' mode='heightFix' :style="{height : setting.defaultSwiperHeight * 0.9 + 'px'}"></image>
					<view class='image-name'>{{food.name}}</view>
				</view>				
			</view>
		</view>
		<view class='group2-imagebox' v-if='foods.length % 2 == 0'>
			<view class='group2-item' v-for="(food, foodIndex) in foods" :key="foodIndex">
				<view class='image-wrapepr' :style="{height : setting.defaultSwiperHeight * 0.9 + 'px'}">
					<image :src='food.cover' class='group2-image' mode='heightFix' :style='{height: setting.defaultSwiperHeight * 0.9 + "px"}'></image>
					<view class='image2-name'>{{food.name}}</view>
				</view>
			</view>
		</view>
		<!-- <view class='group3-imagebox'>
			<view class='group3-left'>
				<view class='image-v' :style="{height : setting.defaultSwiperHeight * 0.9 + 'px'}">
					<image :src='foods[0].cover' class='group3-image' :style='{height : setting.defaultSwiperHeight * 0.9 + "px"}'></image>
					<view class='image3-name'>{{foods[0].name}}</view>
				</view>
			</view>
			<view class='group3-right'>
				<view class='image-h' :style="{height : setting.defaultSwiperHeight * 0.4 + 'px'}">
					<image :src='foods[1].cover' class='group3-image' :style='{height : setting.defaultSwiperHeight * 0.4 + "px"}'></image>
					<view class='image3-name'>{{foods[1].name}}</view>
				</view>
				<view class='image-h' :style="{height : setting.defaultSwiperHeight * 0.4 + 'px'}">
					<image :src='foods[2].cover' class='group3-image' :style='{height : setting.defaultSwiperHeight * 0.4 + "px"}'></image>
					<view class='image3-name'>{{foods[2].name}}</view>
				</view>
			</view>
		</view> -->
		<!-- <view class='group2-statistic'>
			<view class='image-desc' v-for="(food, foodIndex) in foods" :key="foodIndex">
				<view class='image-name'>{{food.name}}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	export default {
		name:"group2",
		props: {
			foods: {
				type: Array,
				default: [],
				required: true,
				validator: function(value) {
					return true;
				}
			}
		},
		data() {
			return {
				setting: {windowWidth: 0},
				imageSpace: 10
			};
		},
		mounted(){
			gui.init(this);
			console.log('------------mounted------------------' + this.foods.length);
		}
	}
</script>

<style>
	.group-box{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.5);
	}
	
	.group-imagebox{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.group-item{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.image-wrapepr{
		position: relative;
	}
	
	.group-image{
		border-radius: 10px;
		background-color: #000;
	}
	
	.image-name{
		color: #fff;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: calc( 100% - 8px );
		background-color: rgba(0,0,0,0.3);
		height: 24px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		height: 32px;
		line-height:32px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		font-size: 12px;
		padding: 0px 4px;
	}
	
	.group2-imagebox{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.group2-item{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		width: 50%;
		height: 100%;
		position: relative;
	}
	
	.group2-image{
		border-radius: 10px;
		background-color: #000;
	}
	
	.image2-name{
		color: #fff;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: calc( 100% - 8px );
		background-color: rgba(0,0,0,0.3);
		height: 24px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		height: 32px;
		line-height:32px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		font-size: 12px;
		padding: 0px 4px;
	}
	
	.group3-imagebox{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.group3-left{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 70%;
	}
	
	.group3-right{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		width: 30%;
	}
	
	.image-v{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	
	.image-h{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	
	.group3-image{
		border-radius: 10px;
		background-color: #000;
	}
	
	.image3-name{
		color: #fff;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: calc( 100% - 8px );
		background-color: rgba(0,0,0,0.3);
		height: 24px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		height: 32px;
		line-height:32px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		font-size: 12px;
		padding: 0px 4px;
	}
	
	/* .group2-statistic{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}
	
	.image-remark{
		font-size: 12px;
		color: #fff;
	} */
</style>